<template>
	<div style="font-family: Arial,Verdana,Roboto;">
		<div class="Myheader" id="userInfoBox">
			<dl class="uesr_head h_box" id="userInfo">
				<dt class="head_img">
					<span class="vipImg"></span>
					<img src="http://img2.hdletv.com/wap/20160318/default/4942896749464113" alt="">
				</dt>
				<dd class="login_not" rel="noLogin">
					<span class="login_not inline_block"><em class="font30">王培英</em></span>
					<span class="pt18 block">
						<em class="font22">15896523698</em>
					</span>
				</dd>
			</dl>
		</div>
		<div class="db"></div>
		<div class="mineBox">
			<a href="javascript:void(0);" class="order-link">
				<span>全部订单</span>
				<span>查看全部订单</span>
			</a>
			<div class="orderList">
				<ul class="h_box">
					<li>
						<a href="javascript:void(0);">
							<i class="fa fa-file-text-o fa-2x"></i>
							<p><em>待付款</em></p>
						</a>
					</li>
					<li>
						<a href="javascript:void(0);">
							<i class="fa fa-pencil-square-o fa-2x"></i>
							<p><em>待签收</em></p>
						</a>
					</li>
					<li>
						<a href="javascript:void(0);">
							<i class="fa fa-list-alt fa-2x"></i>
							<p><em>售后\退换</em></p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="db"></div>
		<div class="mineBox">
			<a href="javascript:void(0);" class="order-link">
				<span>我的资产</span>
			</a>
			<div class="orderList">
				<ul class="h_box">
					<li>
						<a href="javascript:void(0);">
							<strong>0.00</strong>
							<p><em>余额</em></p>
						</a>
					</li>
					<li>
						<a href="javascript:void(0);">
							<strong>0.00</strong>
							<p><em>积分</em></p>
						</a>
					</li>
					<li>
						<a href="javascript:void(0);">
							<strong>10</strong>
							<p><em>代金券</em></p>
						</a>
					</li>
				</ul>
			</div>
			<div class="db"></div>
		</div>

		<ul class="member-list">
			<li>
				<p>抢购订单</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li>
				<p>拼团订单</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li>
				<p>礼品订单</p>
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>
		<div class="db"></div>
		<ul class="member-list">
			<li>
				<p>个人信息</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li>
				<p>收货地址</p>
				<i class="fa fa-angle-right"></i>
			</li>
			<li>
				<p>修改密码</p>
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>
		<div class="db"></div>
		<ul class="member-list">
			<li @click="LoginOut">
				<p>退出登录</p>
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from "@/components/common/_footer.vue"
	export default {
		data() {
			return {
				advert: [],
				module: [],
			}
		},
		components: {
			Footer
			// 			Module
		},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			//alert(config.ApiUrl);
			var userName = localStorage.getItem("memberName");
			var userPwd = localStorage.getItem("memberPwd");
			if (userName == null || userPwd == null || userName == '' || userPwd == '') {
				this.$router.push("/Login");
			}

		},

		mounted: function() {
			this.$layer.close();
			let self = this;
			document.querySelectorAll(".aui-slide-item-item").forEach(function(v) {
				v.addEventListener('click', () => {
					console.log(self);
					self.$router.push('/GoodsDetail')
				})
			});
			document.querySelectorAll(".aui-list-product-item").forEach(function(v) {
				v.addEventListener('click', () => {
					console.log(self);
					self.$router.push('/GoodsDetail')
				})
			});
		},
		methods: {
			LoginOut: function(e) {
                localStorage.removeItem("memberName");
				localStorage.removeItem("memberPwd");
				this.$router.push('/Login')
			}
		}
	}
</script>

<style>
	.Myheader {
		position: relative;
		background: url(../../assets/images/my/bj.png) center no-repeat #e8413d;
		background-size: 100% auto;
	}

	.Myheader .uesr_head {
		padding: 3.2em 1em;
	}

	.Myheader .uesr_head .head_img {
		width: 5.1em;
		height: 5.1em;
		position: relative;
		display: inline-block;
	}

	.Myheader,
	.Myheader .uesr_head,
	.huodong_tishi_box,
	.huodong_tishi_box p {
		height: auto;
		overflow: hidden;
	}

	.vipImg {
		width: 2.25em;
		height: 1.75em;
		position: absolute;
		z-index: 3;
		top: -.8em;
		right: -.5em;
		background: url(http://img3.hdletv.com/wap/20160318/default/4943586322834628) no-repeat;
		background-size: 2.25em auto;
	}

	.Myheader .uesr_head .head_img img {
		width: 5.1em;
		border-radius: 50%;
	}

	.Myheader .uesr_head dd {
		color: #fff;
		padding-top: 1em;
		padding-left: .8em;
		vertical-align: top;
		display: inline-block;
	}

	.inline_block {
		display: inline-block;
	}

	.font30 {
		font-size: 1.5em;
	}

	b,
	cite,
	em,
	i,
	s,
	var {
		font-style: normal;
		font-size: 14px;
	}

	.pl10 {
		padding-left: .5em;
	}

	.font30 {
		font-size: 1.5em;
	}

	.block {
		display: block;
	}

	.font22 {
		font-size: 1.1em;
	}

	.h_box {
		display: flex;
		padding: 10px 0;
	}

	.h_box li {
		flex: 1;
		justify-content: center;
		text-align: center;
	}

	.h_box li p {
		margin-top: 5px;
	}

	.order-link {
		border-bottom: 1px solid #E5E5E5;
	}

	.order-link span {
		margin: 10px;
		color: #666;
		display: inline-block;
		font-size: 15px;
	}

	.orderList strong {
		color: #ef1e00;
		font-size: large;
	}

	.order-link span:nth-child(2) {
		color: #ccc;
		float: right;
	}

	.member-list li {
		border-bottom: 1px solid #eee;
		padding: 10px;
	}

	.member-list li p {
		text-align: left;
		font-size: 16px;
		color: #555;
		display: inline-block;
	}

	.member-list li i {
		float: right;
		font-size: 16px;
	}

	.db {
		height: 5px;
		background-color: #f2f2f2;
	}

	.fa {
		color: #8d8d8d;
	}
</style>
